<script setup>
import { ref, watch } from 'vue'

const songs = ref([])

import { useRouter, useRoute } from 'vue-router'
import { getTypePage } from '@/api/type.js'
import { getSongListApi } from '@/api/song.js'
import { getPlaylistSongs } from '@/api/playlist.js'
import { ElMessage } from 'element-plus'
import { usePlayListStore } from '@/stores/index.js'

const router = useRouter()
const route = useRoute()
const albumId = route.query?.albumId
const playlistId = route.query?.playlistId
const userId = route.query?.userId

const goToSongDetail = (song) => {
  router.push({ name: 'SongDetail', query: { songId: song.id } })
}
const formData = ref({
  name: '',
  typeId: ''
})
// 类型处理
const typeList = ref([])
const getTypeList = async () => {
  const res = await getTypePage({
    pageNum: 1,
    pageSize: 100
  })
  typeList.value = res.data['records']
}
getTypeList()

const getSongList = async () => {
  if (playlistId) {
    const res = await getPlaylistSongs(playlistId, formData.value.name)
    songs.value = res.data
  } else {
    const res = await getSongListApi({
      pageNum: 1,
      pageSize: 100,
      name: formData.value.name,
      typeId: formData.value.typeId,
      albumId: albumId,
      userId: userId
    })
    songs.value = res.data['records']
  }
}
getSongList()

watch(
  formData,
  () => {
    getSongList()
  },
  { deep: true }
)

const copyPlayList = () => {
  if (songs.value.length <= 0) {
    ElMessage.warning('歌单暂无内容，无法复制')
    return
  }
  const songIds = songs.value.map((song) => song.id)
  if (songIds.length > 0) {
    usePlayListStore().setPlaylist(songIds)
    ElMessage.success('复制成功')
  } else {
    ElMessage.warning('复制失败')
  }
}
</script>

<template>
  <div class="song-list-container">
    <h1>All Songs</h1>
    <div class="filter-container">
      <el-input
        v-model="formData.name"
        placeholder="Search by song name"
        class="search-input"
        clearable
      />
      <el-select
        v-model="formData.typeId"
        placeholder="Select Song Type"
        class="filter-select"
        clearable
      >
        <el-option
          v-for="item in typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button v-show="playlistId" type="primary" @click="copyPlayList"
        >复制该歌单</el-button
      >
    </div>

    <div class="song-list">
      <div
        v-for="(song, index) in songs"
        :key="index"
        class="song-item"
        :style="{
          backgroundImage: `url(${song.img})`,
          backgroundSize: 'cover',
          backgroundPosition: 'center'
        }"
        @click="goToSongDetail(song)"
      >
        <div class="overlay"></div>
        <h3>{{ song.name }}</h3>
        <p>{{ song.artist }} - {{ song.genre }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.song-list-container {
  margin-top: 50px;
  text-align: center;
}

h1 {
  font-size: 36px;
  font-weight: bold;
  color: #333;
  margin-bottom: 40px;
}

.filter-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.search-input,
.filter-select {
  width: 300px;
  max-width: 100%;
}

.song-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  justify-items: center;
}

.song-item {
  width: 100%;
  max-width: 250px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  color: white;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.song-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.song-item h3 {
  font-size: 18px;
  margin: 10px 0;
  font-weight: bold;
}

.song-item p {
  font-size: 14px;
  color: #ddd;
  margin-bottom: 15px;
}

.song-item .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  z-index: 1;
}

.song-item:hover .overlay {
  cursor: pointer;
  background: rgba(0, 0, 0, 0.6);
}

.el-button {
  z-index: 2;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.el-button:hover {
  background-color: #ff4081;
  transform: scale(1.05);
}

@media (max-width: 768px) {
  h1 {
    font-size: 28px;
  }

  .song-item {
    width: 90%;
    max-width: 300px;
  }
}
</style>
